import React, {Component} from 'react';
import ReactDOM from 'react-dom'
import {PullToRefresh, ListView} from 'antd-mobile';
import NewsList from "./components/NewsList";
import SearchNav from "../../components/SearchNav";
import {CaretDownOutlined, GithubOutlined} from '@ant-design/icons'
const NUM_ROWS = 1;
let pageIndex = 0;

//初始化数据量数组，增加数据量数组
function genData(pIndex = 0) {
    const dataArr = [];
    for (let i = 0; i < NUM_ROWS; i++) {
        dataArr.push(`row - ${(pIndex * NUM_ROWS) + i}`);
    }
    return dataArr;
}

class Help extends Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            //控制数据更新  这句代码是用来控制item数据的更新,当且仅当任意两行数据不相等时才去更新...
            rowHasChanged: (row1, row2) => row1 !== row2,
        });

        this.state = {
            dataSource,
            refreshing: true,
            isLoading: true,
            height: document.documentElement.clientHeight,
            //document.documentElement返回html dom中的root 节点
            useBodyScroll: false,
        };
    }

    componentDidMount() {
        const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop-45;
        setTimeout(() => {
            this.rData = genData();
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(genData()),
                height: hei,
                refreshing: false,
                isLoading: false,
            });
        }, 10);
    }

    //刷新函数
    onRefresh = () => {
        this.setState({refreshing: true, isLoading: true});
        // 模拟初始Ajax
        setTimeout(() => {
            this.rData = genData();
            this.setState({
                //想要更新datasource中的数据，必须每次通过cloneWithRows这个来重新挂载datasource的值。
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                refreshing: false,
                isLoading: false,
            });
        }, 10);
    };

    //下拉回调函数
    onEndReached = (event) => {
        if (this.state.isLoading) {
            return;
        }
        this.setState({isLoading: true});
        setTimeout(() => {
            this.rData = [...this.rData, ...genData(++pageIndex)];
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                isLoading: false,
            });
        }, 300);
    };

    render() {
        const row1 = () => {
            return (
                <NewsList history={this.props.history} pageInfo={pageIndex+1}/>
            )
        }
        return (<div>
            <div className={"News"}>
                <div className={"top"}>
                    <div className={"SearchNav"}>
                        <div className={"left"}>
                            <GithubOutlined className={"icon"} />
                            &nbsp;南京
                            <CaretDownOutlined/>
                        </div>
                        <div className={"right"}>
                            <SearchNav history={this.props.history}/>
                        </div>
                    </div>
                </div>
                <div className={"main"}>
                            <ListView
                                key={1}
                                ref={el => this.lv = el}
                                dataSource={this.state.dataSource}
                                renderFooter={() => (<div style={{padding: 30, textAlign: 'center'}}>
                                    {this.state.isLoading ? '加载中...' : '加载完成'}
                                </div>)}
                                renderRow={row1}
                                style={{
                                    height: this.state.height,
                                    border: '1px solid #ddd',
                                    margin: '5px 0',
                                }}
                                pullToRefresh={<PullToRefresh
                                    refreshing={this.state.refreshing}
                                    indicator={this.state.down ? {} : {deactivate: '下拉可以刷新'}}
                                    onRefresh={this.onRefresh}
                                />}
                                onEndReached={this.onEndReached}
                                onEndReachedThreshold={10}
                                pageSize={1}
                            />
                </div>
            </div>

        </div>);
    }
}

ReactDOM.render(<Help/>, document.getElementById("root"));
export default Help


//renderSeparator={separator} 如果提供了此属性，一个可渲染的组件会被渲染在每一行下面，除了小节标题的前面的最后一行。在其上方的小节ID和行ID，以及邻近的行是否被高亮会作为参数传递进来。
